<template>
    <div id="basics-deploy">
        <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="160px" :rules="rules">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检任务名称" prop="v_Name">
                        <el-input v-model="ruleForm.v_Name" placeholder="巡检任务名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检计划" prop="l_IPPlanId">
                        <el-select 
                            v-model="ruleForm.l_IPPlanId" 
                            filterable 
                            class="m-2" 
                            placeholder="选择巡检计划" 
                            @change="planChange"
                            value-key="id"
                            popper-class="set-select"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in planOptions"
                                :key="item.id"
                                :label="item.v_Name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col v-if="preType === 'equ'" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检路线">
                        <el-input disabled readonly v-model="showForm.v_IPPathName" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="风险分区">
                        <el-input disabled readonly v-model="showForm.v_RiskPartitionName" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="自动巡检分类">
                        <el-input disabled readonly v-model="showForm.v_IPClassName" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检类型">
                        <el-input disabled readonly v-model="showForm.v_IPType" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="任务计划开始时间" prop="d_PlanStartTime">
                        <el-date-picker
                            v-model="ruleForm.d_PlanStartTime"
                            type="datetime"
                            popper-class="el-date-p"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="请选择开始时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="任务计划结束时间" prop="d_PlanEndTime">
                        <el-date-picker
                            v-model="ruleForm.d_PlanEndTime"
                            type="datetime"
                            popper-class="el-date-p"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="请选择结束日时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , toRefs , watch , toRaw, onMounted , nextTick } from 'vue';
import { ElCol,FormRules, ElForm, ElRow } from 'element-plus';
import { SMSIPPathList , SMSDCRiskPartitionList , sysDictDataList , SMSIPPlanList } from '/@/api/centerControl/sms';

/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: ruleFormType,
    showForm: showInfo,
}
/*** form 表单数据类型 */
type ruleFormType = {
    v_Name: String, // 巡检任务名称
    l_IPPlanId: any, // 巡检计划id
    d_PlanStartTime: '', // 任务计划开始时间
    d_PlanEndTime: '', // 任务计划结束时间
}
type showInfo = {
    v_IPPathName: String, // 巡检路线
    v_RiskPartitionName: String, // 风险分区
    // l_JobApplyId: any, // 作业申请Id
    v_IPClassName: String, // 自能巡检分类
    v_IPType: String, // 巡检类型
}
export default defineComponent( {
    name: 'basics-deploy',
    components: {},
    props: {
        basInfo: {
            type: String,
            default: ''
        },
        preType: {
            type: String,
            default: ''
        },
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();
        const planOptions = ref();

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            ruleForm: {} as ruleFormType,
            showForm: {} as showInfo,
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // 巡检任务名称
            v_Name: [
				{ required: true, message: '请输入计划名称', trigger: 'blur' },
			],
            // 巡检计划id
            l_IPPlanId: [
                { required: true, message: '请选巡检计划', trigger: 'change' },
            ],
            // 任务计划开始时间
            d_PlanStartTime: [
                { required: true, message: '请选任务计划开始时间', trigger: 'change' },
            ],
            // 任务计划结束时间
            d_PlanEndTime: [
                { required: true, message: '请选任务计划结束时间', trigger: 'change' },
            ],
        })

        /*** 巡检计划改变事件 */
        const planChange = (val: any) => {
            state.showForm = planOptions.value.find((item: any) => {return item.id === val});
            console.log(state.showForm,'state.showForm')
        }

        /*** getApiFun 获取公用数据 */
        const getApiFun = async() => {
            // 巡检计划列表
            let param: any = {};
            param.n_State = 1;
            param.n_TaskGenerateModel = 0;
            if(props.preType === 'equ') param.n_IPClass = 0;
            else param.n_IPClass = 1;            
            let rds: any = await SMSIPPlanList(param);
            if(rds.success) {
                planOptions.value = rds.data;
            }
        }

        onMounted(() => {
            nextTick(() => {
                getApiFun();
                if(props.basInfo !== ''){
                    const basInfo:any = JSON.parse(props.basInfo)
                    console.log(basInfo,'basInfo')
                    state.ruleForm = basInfo;
                    state.showForm = basInfo;
                }else{
                    console.log('新增')
                }
            })
        })

        return {
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            rules,
            planChange,
            planOptions,
        }
    },
} )
</script>
<style scoped lang="scss">
#basics-deploy{
    max-height: 60vh;
    overflow-y: auto;
    margin: 40px auto 0px auto;
    width: 90%;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
}
:deep(.el-cascader){
    width: 100%!important;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%!important;
}
:deep(.el-form-item__content){
    :deep(.el-input){
        width: 100%!important;
    }
}
</style>